<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择器</title>
    <style>
        /* ul li{
            color: red;
        } */
        ul>li{
            color: red;
        }
        span+li{
            color: blue;
        }
        p~li{
            color: green;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <p class="row1">后代选择器：选择所有被 E元素包含的 F元素。</p>
            <span>语法： E  F{}<br>意思为 ul元素里面所有的 li元素，只要是 ul元素的后代元素都生效。</span>
            <!-- <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
                <div>
                    <ol>
                        <li>列表4</li>
                        <li>列表5</li>
                    </ol>
                </div>
            </ul> -->
        </div>
        <div>
            <p class="row2">子代选择器：选择所有作为 E元素的直接子元素 F，对更深一层的元素不起作用。用 > 表示。</p>
            <span>语法：E > F{}<br></span>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
                <div>
                    <ol>
                        <li>列表4</li>
                        <li>列表5</li>
                    </ol>
                </div>
            </ul>
        </div>
        <div>
            <p class="row3">相邻兄弟选择器：选择于 E元素紧邻的 F元素，作用于一个元素。用 + 表示。</p>
            <span>语法：E + F{}<br>只有与 E元素相邻的元素有效，不相邻（相隔）的元素不会生效，且只能是往下相邻，往上相邻也不会生效。</span>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <span>F元素</span>
                <li>列表3</li>
                <li>列表4</li>
            </ul>
        </div>
        <div>
            <p class="row4">通用兄弟选择器：选择 E元素之后的所有兄弟元素 F，作用于多个元素，用 ~ 隔开。</p>
            <span>语法：E ~ F{}<br></span>
            <ul>
                <li>列表1</li>
                <p>E元素</p>
                <li>列表2</li>
                <span>元素</span>
                <li>列表3</li>
                <li>列表4</li>
            </ul>
        </div>
    </div>
</body>

</html>